<template>
    <div class="index">

        <div class="hd clr">
            <div class="fr">
                <span v-if="loginInfo.loginUsername">
                    {{loginInfo.loginUsername}}<a href="JavaScript:;" @click="loginOut()">退出登录</a>
                </span>
                <span v-else>
                    <a href="JavaScript:;" @click="toggleLoginPop(true)">登录</a>
                    <a href="JavaScript:;" @click="toggleRegPop(true)">注册</a>
                </span>
            </div>
        </div>

        <dl class="clr" v-for="(item,index) in list" :key="index">
            <dt class="clr">
                {{item.title}}

                <span class="fr">
                    {{item.createdAt}}
                </span>
            </dt>
            <dd class="cont">
                {{item.content}}
            </dd>
            <dd class="ft">
                <span @click="apiLike(item.id,index)">赞 {{item.like_count}}</span>
                <span>回复 {{item.comment_count}}</span>
                <span class="report">我要回复</span>
            </dd>
        </dl>

        <div class="pages">
            <ul class="clr">
                <li :class="pageIndex === num ? 'active fl' : 'fl'" v-for="(num,index) in pageInfo.total" :key="index" @click="jumpPage(num)">
                    {{num}}
                </li>
            </ul>
        </div>



        <!--弹窗-->
        <Login v-model="loginInfo" v-if="isShowLoginPop"></Login>
        <Register v-if="isShowRegPop"></Register>
    </div>
</template>

<script>
    import Login from '../../components/Login'
    import Register from '../../components/Register'
    export default {
        name: "Index",
        components: {
            Login,
            Register
        },
        data () {
            return {
                list: [],  // 列表数
                pageInfo:{
                    currentPage:1, // 当前页
                    pageSize:3, // 每页展示的数
                    total:1
                },
                pageIndex:1,
                loginInfo:{
                    isLogin: false,
                    loginUsername: ''
                },
                isShowLoginPop: false,
                isShowRegPop: false
            }
        },
        created () {

            if(this.getCookie('username')){
                this.loginInfo.loginUsername = this.getCookie('username')
            }

            this.apiGetList();
        },
        methods: {
            apiGetList () {
                let _this = this
                this.$http.get(`/api/list?currentPage=${this.pageInfo.currentPage}&pageSize=${this.pageInfo.pageSize}`)
                    .then( rs => {
                        let datas = rs.data;
                        if(datas.code == 0){
                            _this.list = datas.data;
                            _this.pageInfo.total = Math.ceil(datas.count/_this.pageInfo.pageSize)
                        }
                    })
            },
            apiLike (id, index) {
                let auth_Token = 'Bearer '+ localStorage.getItem('token')
                this.$http.post('/api/like',{
                    content_id: id
                }, {
                    headers:{
                        'Authorization': auth_Token
                    }
                }).then( rs => {
                        let datas = rs.data;
                        console.log('datas',datas)
                        if(datas.code == 0){
                            this.list[index].like_count = datas.data.like_count;
                        }else{
                            alert(datas.msg)
                        }
                    })
            },
            loginOut () {
                this.$http.post('/api/loginout')
                    .then( rs => {
                        let datas = rs.data;
                        console.log('datas',datas)
                        if(datas.code == 0){
                            alert('退出成功')

                            // 删除前端展示的cookie
                            this.delCookie('username');

                        }else{
                            alert(datas.msg)
                        }
                    })


                // 删除后端的
                // this.delCookie('koa:message');
            },
            getCookie(name){
                var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
                return (arr=document.cookie.match(reg))?unescape(arr[2]):null;
            },
            delCookie(name){
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval=this.getCookie(name);
                if(cval!=null)
                    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
            },
            jumpPage (index) {
                this.pageInfo.currentPage = index;
                this.pageIndex = index;
                this.$nextTick(()=>{
                    this.apiGetList();
                })
            },
            toggleLoginPop (flag) {
                this.isShowLoginPop = flag
            },
            toggleRegPop (flag) {
                this.isShowRegPop = flag
            },
        }
    }
</script>

<style lang="less" scoped>
    .index{
        width:1400px;
        margin:0 auto;
    }


    .hd{
        a{
            margin-left:20px;
        }
    }

    dl{
        margin-top:30px;
        padding:0 40px 10px;
        border-bottom:1px solid #ddd;

        .cont{
            color:#999;
        }

        .ft{
            float:right;
            span{
                margin-left:10px;
                user-select: none;
            }
            .report{
                text-decoration: underline;
                cursor: pointer;
                color:blue;
            }
        }
    }

    .pages{
        margin-top:20px;
        li{
            display:inline-block;
            padding:2px 10px;
            border:1px solid #ddd;
            margin-right:5px;
            cursor: pointer;

            &.active{
                background:blue;
                color:#fff;
            }
        }
    }
</style>